<script setup>
const props = defineProps({
  name: {
    required: true
  },
  size: {
    type: [Number, String],
    default: 16
  },
  icon: {// coat:皮肤 general:通用 about:关于
    type: String,
    default: 'None'
  }
})
</script>

<template>
  <span class="title">
     <n-icon :size="props.size">
        <icon-mm-coat v-if=" props.icon === 'coat' "/>
        <icon-mm-general v-else-if=" props.icon === 'general' "/>
        <icon-ep-warning v-else-if=" props.icon === 'about' "/>
      </n-icon>
    <span class="name">{{ props.name }}</span>
  </span>
</template>

<style scoped lang="less">
.title {
  display: flex;
  align-items: center;

  .name {
    padding-left: 6px;
  }
}
</style>